<template>
  <view class="page">
    <uni-nav-bar
      title="订单结算"
      color="#fff"
      left-icon="left"
      statusBar
      fixed
      backgroundColor="#FC3F41"
      :border="false"
      @clickLeft="$tools.back"
    />
    <scroll-view
      scroll-y
      :style="{ height: scrollHeight + 'px', marginTop: scrollTop + 'px' }"
    >
      <view class="container">
        <!-- top -->
        <view class="top">
          <view class="top-header">
            <view class="top-header-brand">
              <image
                class="top-header-image"
                src="/static/images/menu/settlement/lace_white.png"
                mode="heightFix"
              />
              <view class="top-header-text">自提</view>
            </view>
          </view>
          <view class="top-content">
            <view class="top-content-title" @tap="toStoreList">
              <text class="store-name">{{ shopInfo.shopName }}</text>
              <uni-icons
                type="right"
                size="16"
                color="#777777"
              />
            </view>
            <view class="top-content-subtitle">
              <text>直线距离{{ shopInfo.distance }}</text>
              <text class="mx-xs">|</text>
              <text class="store-address">
                {{ shopInfo.shopAddress }}
              </text>
            </view>
          </view>
        </view>
        <!-- center -->
        <view class="center">
          <view class="details">
            <view
              class="detail"
              v-for="(cart, index) in cart"
              :key="index"
              v-if="index < 2 || showAll"
            >
              <image
                class="detail-image"
                :src="cart.productLogo"
              />
              <view class="detail-info">
                <view class="d-flex-column">
                  <view class="detail-name">
                    <text>{{ cart.productName }}</text>
                    <text>￥{{ cart.productPrice }}</text>
                  </view>
                  <view class="detail-attr">
                    {{ cart.attrAndSpecText }}
                  </view>
                </view>
                <view class="detail-quantity">
                  <text>x</text>
                  <text class="mx-xs">{{ cart.quantity }}</text>
                </view>
              </view>
            </view>
            <view
              class="more"
              @tap="toggleShowAll"
            >
              <text class="mr-xs">
                {{ showAll ? "收起更多" : "展开全部" }}
              </text>
              <uni-icons
                :type="showAll ? 'up' : 'down'"
                size="16"
                color="#AAAAAA"
              />
            </view>
          </view>
          <view class="coupon">
            <view class="d-flex-row-c-between-y-center mb-lg">
              <text class="text-base text-secondary">优惠券</text>
              <text class="text-base text-primary">查看详情</text>
            </view>
            <view class="d-flex-row-y-center">
              <image
                class="warning-icon"
                src="/static/images/menu/settlement/warning.png"
              />
              <text class="text-sm text-warning">已享特惠，节省￥0.84</text>
            </view>
          </view>
          <view class="summary">
            <view class="summary-total">
              <view class="summary-quantity">
                <text>共</text>
                <text class="mx-xs">{{ cartTotalQuantity }}</text>
                <text>件,合计</text>
              </view>
              <text class="summary-price"> ￥{{ cartTotalPrice }} </text>
            </view>
            <view class="summary-desc">
              <text> 本单预计可得（以实际到账为准） </text>
              <text class="text-warning"> 82雪王币 </text>
              <image
                class="snow-icon"
                src="/static/images/menu/settlement/snow_icon.png"
              />
              <text class="text-warning">+9甜蜜值</text>
              <image
                class="rule-icon"
                src="/static/images/menu/settlement/rule_icon.png"
              />
            </view>
          </view>
        </view>
        <!-- gift card -->
        <view class="gift-card">
          <view class="gift-card-left">
            <image
              class="gift-card-icon"
              src="/static/images/menu/settlement/gift_card_icon.png"
            />
            <text>礼品卡</text>
          </view>
          <view class="gift-card-right">
            <text class="mr-xs">点击查看</text>
            <uni-icons
              type="right"
              size="16"
              color="#777777"
            />
          </view>
        </view>
        <!-- 不要打包袋 -->
        <view class="no-bag">
          <image
            class="no-bag-image"
            src="/static/images/menu/settlement/no-bag-flower.png"
          />
          <view class="no-bag-checkbox">
            <uni-icons
              type="circle"
              size="24"
              color="#AAAAAA"
            />
          </view>
        </view>
        <!-- 备注 -->
        <view class="remark">
          <text class="text-base text-secondary">备注</text>
          <view class="remark-right">
            <text>特殊需求请与门店提前沟通</text>
            <uni-icons
              type="right"
              size="14"
              color="#aaa"
            />
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="footer">
      <view class="footer-left">
        <text class="footer-left-text">实付：</text>
        <text class="footer-left-price">￥{{ cartTotalPrice }}</text>
      </view>
      <view class="footer-paybtn">
        <text>确认支付</text>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState, mapGetters } from "vuex"
export default {
  name: "Settlement",
  data() {
    return {
      shopInfo: {
        shopId: "1111111111111111111",
        shopName: "蜜雪冰城（文化广场店）",
        regionCode: "440306",
        shopAddress: "经开区中山路梦想小镇写字楼15号",
        distance: "965m"
      },
      scrollTop: 0,
      scrollHeight: 0,
      showAll: false
    }
  },
  onLoad() {
    this.scrollTop = uni.getSystemInfoSync().statusBarHeight + 44
    this.scrollHeight =
      uni.getSystemInfoSync().windowHeight - this.scrollTop - uni.upx2px(120)
  },
  computed: {
    ...mapState("menu", ["cart"]),
    ...mapGetters("menu", ["cartTotalPrice", "cartTotalQuantity"])
  },
  methods: {
    toggleShowAll() {
      this.showAll = !this.showAll
    },
    toStoreList() {
      uni.navigateTo({
        url: "/pages/store/list/list"
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.page {
  position: relative;
  background-color: #f5f5f5;
}

.container {
  position: relative;
  padding: $uni-spacing-row-lg;

  &::before {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(300rpx - calc(var(--status-bar-height) + 44px));
    background-image: linear-gradient(to bottom, #fc3f41, #f5f2f2);
    z-index: 0;
  }
}

.top {
  position: relative;
  background: #fff;
  border-radius: $uni-border-radius-xl;
  margin-bottom: $uni-spacing-row-base;

  &-header {
    position: relative;
    height: 70rpx;
    background-color: #fff8f8;
    border-radius: $uni-border-radius-xl $uni-border-radius-xl 0 0;

    &-brand {
      display: flex;
      position: absolute;
      bottom: 0;
      left: 0;
    }

    &-image {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 80rpx;
      z-index: 1;
    }

    &-text {
      height: 80rpx;
      display: flex;
      align-items: center;
      padding-left: $uni-spacing-row-lg;
      font-size: $uni-font-size-lg;
      font-weight: 500;
      color: $uni-color-primary;
      z-index: 2;
    }
  }

  &-content {
    padding: $uni-spacing-row-lg;

    &-title {
      display: flex;
      align-items: center;
      margin-bottom: $uni-spacing-row-base;

      .store-name {
        font-size: $uni-font-size-lg;
        color: $uni-text-color;
        margin-right: $uni-spacing-row-sm;
      }
    }

    &-subtitle {
      font-size: $uni-font-size-base;
      color: $uni-text-color-secondary;
      display: flex;
      align-items: center;

      .store-address {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.center {
  background: #fff;
  border-radius: $uni-border-radius-xl;
  margin-bottom: $uni-spacing-row-base;
  padding: 0 $uni-spacing-row-lg;
}

.details {
  display: flex;
  flex-direction: column;
  border-bottom: 1rpx dashed $uni-border-color;
}

.detail {
  display: flex;
  align-items: stretch;
  padding: $uni-spacing-row-lg 0;

  &-image {
    width: 120rpx;
    height: 120rpx;
    margin-right: $uni-spacing-row-base;
  }

  &-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  &-name {
    font-size: $uni-font-size-base;
    color: $uni-text-color;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: $uni-spacing-row-sm;
    margin-right: $uni-spacing-row-xs;
  }

  &-attr {
    font-size: $uni-font-size-sm;
    color: $uni-text-color-secondary;
  }

  &-quantity {
    font-size: $uni-font-size-sm;
    color: $uni-text-color;
    margin-bottom: $uni-spacing-row-sm;
  }
}

.more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;
  padding: $uni-spacing-row-sm 0 $uni-spacing-row-base 0;
}

.coupon {
  display: flex;
  flex-direction: column;
  padding: $uni-spacing-row-lg 0;
  border-bottom: 1rpx dashed $uni-border-color;
}

.warning-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: $uni-spacing-row-xs;
}

.summary {
  display: flex;
  flex-direction: column;
  padding: $uni-spacing-row-lg 0;

  &-total {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: $uni-spacing-row-base;
  }

  &-quantity {
    font-size: $uni-font-size-base;
    font-weight: 400;
    color: $uni-text-color-secondary;
  }

  &-price {
    font-size: $uni-font-size-lg;
    font-weight: 600;
    color: $uni-text-color;
  }

  &-desc {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: $uni-font-size-xs;
    font-weight: 400;
    color: $uni-text-color-grey;
  }
}

.snow-icon,
.rule-icon {
  width: 30rpx;
  height: 30rpx;
}

.gift-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $uni-spacing-row-base;
  background-color: #fff;
  padding: $uni-spacing-row-xl $uni-spacing-row-lg;
  border-radius: $uni-border-radius-xl;

  &-left {
    display: flex;
    align-items: center;
    font-size: $uni-font-size-base;
    color: $uni-text-color;
  }

  &-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: $uni-spacing-row-sm;
  }

  &-right {
    display: flex;
    align-items: center;
    font-size: $uni-font-size-base;
    color: $uni-color-primary;
  }
}

.no-bag {
  width: 100%;
  height: 112rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: $uni-spacing-row-lg;
  position: relative;
  margin-bottom: $uni-spacing-row-base;

  &-image {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 702rpx;
    height: 112rpx;
    z-index: 1;
  }

  &-checkbox {
    z-index: 2;
  }
}

.remark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $uni-spacing-row-base;
  background-color: #fff;
  padding: $uni-spacing-row-xl $uni-spacing-row-lg;
  border-radius: $uni-border-radius-xl;
  font-size: $uni-font-size-base;
  color: $uni-text-color;
}

.remark-right {
  display: flex;
  align-items: center;
  gap: $uni-spacing-row-xs;
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 $uni-spacing-row-lg;
  background-color: #fff;
  z-index: 11;

  &-left {
    display: flex;
    align-items: center;
    gap: $uni-spacing-row-xs;

    &-text {
      font-size: $uni-font-size-sm;
      color: $uni-text-color;
    }

    &-price {
      font-size: $uni-font-size-lg;
      font-weight: 600;
      color: $uni-text-color;
    }
  }

  &-paybtn {
    width: 240rpx;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $uni-font-size-lg;
    font-weight: 500;
    color: #fff;
    background-color: $uni-color-primary;
    border-radius: $uni-border-radius-xl;
  }
}
</style>
